<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="6" @click.native="changeone">
                <project-card :featureArray="featureArray"></project-card>
            </el-col>
            <el-col :span="18">
                <el-card class="box-card">
                    <el-tabs v-model="activeName">
                        <el-tab-pane :label="$t('msg.profile.feature')" name="feature">
                            <feature :featureArray="featureArray"></feature>
                        </el-tab-pane>
                        <el-tab-pane :label="$t('msg.profile.chapter')" name="chapter">
                            <chapter :chapterArray="chapterArray"></chapter>
                        </el-tab-pane>
                        <el-tab-pane :label="$t('msg.profile.author')" name="author">
                            <author></author>
                        </el-tab-pane>
                    </el-tabs>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {userFeature , userChapter} from '../../api/sys'
import Author from './components/Author'
import Chapter from './components/Chapter'
import Feature from './components/Feature'
import ProjectCard from './components/ProjectCard'
export default {
 name : "", 
 data(){
  return {
      activeName:'feature',
      featureArray:[],
      chapterArray:[]

  }
 },
 computed:{
     listData(){
         return this.$store.getters.language
     }
 },
 watch:{
     listData(val){
         this.changeone()
     }
 },
 created(){
     this.getFeature(),
     this.getChapter()
 },
 components : {
    Author,
    Chapter,
    Feature,
    ProjectCard
 },
 methods:{
     async getFeature(){
         let res = await userFeature()
         console.log('功能-->',res);
         this.featureArray = res
     },
          async getChapter(){
         let res = await userChapter()
         console.log('章节-->',res);
         this.chapterArray = res
     },
    changeone(){
      this.getFeature();
      this.getChapter()
    },
 }
}
</script>


<style scoped>
</style>